<template>
  <el-dialog
    v-dialogDrag
    append-to-bod
    :visible.sync="dialogVideoVisible"
    :width="width"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #title>
      <div
        class="u-relative u-flex u-row-center u-user-select-none custom-header"
      >
        <span class="custom-header--title">{{ title }}</span>
        <!-- <div class="u-absolute custom-header--action">
          <i
            class="el-dialog__close u-cursor-pointer el-icon el-icon-close"
            @click="closeDialog"></i>
        </div> -->
      </div>
    </template>
    <video
      style="width: 100%; max-height: 600px"
      :src="url"
      ref="vueRef"
      class="avatar video-avatar"
      controls="controls"
    >
      您的浏览器不支持视频播放
    </video>
    <div class="isBut-Center-position">
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "videoDialog",

  props: {
    url: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "40%",
    },
  },
  data() {
    return {
      title: "视频预览",
      dialogVideoVisible: true,
    };
  },

  methods: {
    closeDialog() {
      // 视频的暂停
      this.$refs.vueRef.pause();
      this.$emit("cancel");
    },
  },

  created() {
    // 视频的播放
    console.log(this.title, this.url, this.width);
    // this.$refs.vueRef.play();//播放
  },
};
</script>

<style lang="scss" scoped>
.isBut-Center-position {
  position: relative;
  bottom: -18px;
  width: 100%;
  text-align: center;
}
// 弹窗表头
.custom-header {
  background-color: rgb(226, 232, 239) !important;
  & .custom-header--action {
    font-size: 25px !important;
  }
}
</style>
